<template>
  <div>
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <span class="span"></span> 活动详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-input v-model="cardName" placeholder="会员卡号"></el-input>
      </el-col>
      <el-col :span="3">
        <el-input v-model="memberName" placeholder="会员姓名"></el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="selectValue" clearable placeholder="请选择">
          <el-option v-for="item in selectOption" :key="item.selectValue" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4.5">
        <div class="block">
          <el-date-picker v-model="dateValue" type="date" placeholder="选择日期"></el-date-picker>
        </div>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="searchlist()">查询</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="newDialogVisible = true">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="reset">重置</el-button>
      </el-col>
    </el-row>
    <!-- table表格 -->
    <el-table :data="memberListData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="cardNum" label="会员卡号" width="180"></el-table-column>
      <el-table-column prop="name" label="会员姓名" width="80"></el-table-column>
      <el-table-column prop="birthday" label="会员生日"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column prop="integral" label="可用积分" width="80"></el-table-column>
      <el-table-column prop="money" label="开卡金额" width="80"></el-table-column>
      <el-table-column prop="payType" label="支付类型" width="80">
        <template v-slot="scope">
          <p v-if="scope.row.payType == '1'">微信支付</p>
          <p v-if="scope.row.payType == '2'">现金</p>
          <p v-if="scope.row.payType == '3'">支付宝</p>
          <p v-if="scope.row.payType == '4'">银行卡</p>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="会员地址 "></el-table-column>
      <el-table-column label="操作 " width="180">
        <template v-slot="scope">
          <el-button @click="memberEndit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination @size-change="handleSizeChange" @current-change="getNowpage" :page-sizes="[8, 20, 30, 40]"
      :page-size="this.paramUser.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="memberData.total">
    </el-pagination>
    <!-- //编辑框数据 -->
    <el-dialog title="会员编辑" :visible.sync="enditDialogVisible" width="60%">
      <el-form :model="enditMemberList" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="enditMemberList.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model="enditMemberList.name"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
          <el-date-picker v-model="enditMemberList.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="enditMemberList.phone"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money">
          <el-input v-model="enditMemberList.money"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="integral">
          <el-input v-model="enditMemberList.integral"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-input v-if="enditMemberList.payType== 1" v-model="payTypeList.one"></el-input>
          <el-input v-if="enditMemberList.payType== 2" v-model="payTypeList.two"></el-input>
          <el-input v-if="enditMemberList.payType== 3" v-model="payTypeList.three"></el-input>
          <el-input v-if="enditMemberList.payType== 4" v-model="payTypeList.four"></el-input>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input v-model="enditMemberList.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="getEnditMember(enditMemberList)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- //新增数据框 -->
    <el-dialog title="会员编辑" :visible.sync="newDialogVisible" width="60%">
      <el-form :model="newMemberList" :rules="newMemberListRules" ref="ruleForm" status-icon label-width="100px"
        class="demo-ruleForm">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="newMemberList.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model="newMemberList.name"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
          <el-date-picker v-model="newMemberList.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="newMemberList.phone"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money">
          <el-input v-model="newMemberList.money"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="integral">
          <el-input v-model="newMemberList.integral"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-input v-model="newMemberList.payType"></el-input>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
            v-model="newMemberList.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="getMemberList('ruleForm')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import memberApi from "@/api/member"; //封装的api接口
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      //这里存放数据
      return {
        cardName: "", //会员卡号
        memberName: "", //会员姓名
        selectValue: "", //支付类型
        selectOption: [
          {
            value: "选项1",
            label: "现金"
          },
          {
            value: "选项2",
            label: "微信"
          },
          {
            value: "选项3",
            label: "支付宝"
          },
          {
            value: "选项4",
            label: "银行卡"
          }
        ], //支付类型数据
        dateValue: "", //日期
        memberData: [], //列表数据
        memberListData: [],
        paramUser: {
          pagenum: 1,
          pagesize: 6
        }, //用户列表参数配置
        enditDialogVisible: false, //用户编辑
        enditMemberList: {}, //编辑框数据
        newDialogVisible: false, //新增数据框开关
        newMemberList: {
          cardNum: "",
          name: "",
          birthday: "",
          phone: "",
          money: 0,
          integral: 0,
          payType: "",
          address: ""
        },
        // 编辑框中支付类型选项
        payTypeList: {
          one: "微信支付",
          two: "现金",
          three: "支付宝",
          four: "银行卡"
        },
        // 新增数据里面进行表单验证
        newMemberListRules: {
          cardNum: [
            { required: true, message: "请输入会员卡号", trigger: "blur" },
            { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
          ],
          name: [{ required: true, message: "请输入会员名称", trigger: "blur" }],
          phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          money: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          integral: [
            { required: true, message: "请输入手机号", trigger: "blur" }
          ],
          address: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          payType: [{ required: true, message: "请输入手机号", trigger: "blur" }],
          birthday: [{ required: true, message: "请输入手机号", trigger: "blur" }]
        }
      };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      //api封装get请求会员列表数据
      getTableData() {
        memberApi.getMemberList().then(response => {
          console.log(response);
          this.memberData = response.data;
          console.log(this.memberData);
          this.newDialogVisible = false;
          this.getNowpage(1);
        });
      },
      getNowpage(nowpage) {
        var start = (nowpage - 1) * this.paramUser.pagesize;
        var end = start + this.paramUser.pagesize; //所有数据
        console.log(start, end);
        this.memberListData = this.memberData.memberList.slice(start, end); //当前页面的数据
        console.log(this.memberListData);
      },
      //搜索数据
      searchlist() {
        memberApi.getSearch(this.cardName, this.memberName).then(res => {
          console.log(res);
          if (res.data.message != "查询成功")
            return this.$message.error("查询数据失败");
          this.$message.success("查询数据成功");
          this.getTableData();
        });
      },
      //点击新增数据api封装getMemberAdd
      getMemberList(formName) {
        console.log(formName);
        this.$refs[formName].validate(valid => {
          if (valid) {
            memberApi
              .getMemberAdd(
                this.newMemberList.cardNum,
                this.newMemberList.name,
                this.newMemberList.phone
              )
              .then(res => {
                console.log(res.data.res);
                if (res.data.res.code !== 200)
                  return this.$message.error("新增数据失败");
                this.$message.success("数据新增成功");
                this.newMemberList = "";
                this.getTableData();
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },

      // api封装delMemberList删除列表数据
      del(row) {
        this.$confirm("确认删除这条记录吗？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消"
        })
          .then(() => {
            memberApi.delMeberList(row.id).then(res => {
              console.log(res.data.res.code);
              if (res.data.res.code !== 200)
                return this.$message.error("删除列表失败");
              this.$message.success("删除列表成功");

              this.getTableData();
            });
          })
          .catch(() => {
            this.$message.error("取消列表成功");
          });
      },
      // 编辑用户数据
      memberEndit(row) {
        console.log(row);
        this.enditMemberList = row;

        this.enditDialogVisible = true;
      },
      // 编辑框api封装
      getEnditMember(getEbditMember) {
        memberApi
          .getEbditMember(getEbditMember.cardNum, getEbditMember.name)
          .then(response => {
            console.log(response);
            if (response.data.code != 200)
              return this.$message.error("编辑数据失败");
            this.$message.success("编辑数据成功");
            this.enditDialogVisible = false;
            this.getTableData();
          });
      },
      // 重置
      reset() {
        if (
          this.cardNum != "" &&
          this.memberName != "" &&
          this.selectValue != "" &&
          this.dateValue
        ) {
          (this.cardName = ""),
            (this.memberName = ""),
            (this.selectValue = ""),
            (this.dateValue = "");
          this.$message.success("重置成功");
        } else {
          this.$message.error("会员卡号,会员姓名,支付类型,日期不能为空");
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getTableData();
      setTimeout(() => {
        this.getNowpage(1);
      }, 100);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() { },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { } //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style lang='scss' scoped>
  .span {
    width: 5px;
    height: 4px !important;
    background: red;
    border: 1px solid red;
    margin-right: 10px;
  }

  .el-row {
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>